<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <!-- 引入样式 -->
    <link href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" rel="stylesheet">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="../app/lib/ZohoCrmHelper.js" type="text/javascript"></script>
    <script src="../app/lib/ZSDK.js" type="text/javascript"></script>
    <script src="../app/lib/jquery-1.10.2.js" type="text/javascript"></script>
    <script src="../app/lib/ZohoEmbededAppSDK.min.js" type="text/javascript"></script>
    <script src="../app/lib/axios.min.js" type="text/javascript"></script>
    <title>股权穿透</title>
</head>

<body>
<div id="app">


    <el-row>
        <el-col :span="12">
            <el-input
                    placeholder="输入关键字进行过滤"
                    v-model="filterText">
            </el-input>
        </el-col>
        <el-col :span="12">
            <el-button @click="allChecked" type="primary">选中全部</el-button>
            <el-button @click="resetChecked" type="primary">清空选项</el-button>
            <el-button @click="saveAccount" type="primary">保存</el-button>
        </el-col>
    </el-row>


    <el-tree
            :empty-text="emptyText"
            :data="dataForm"
            :props="defaultProps"
            @check-change="handleCheckChange"
            node-key="id"
            ref="tree"
            :filter-node-method="filterNode"
            show-checkbox
            highlight-current
            default-expand-all></el-tree>

</div>


</body>
</html>


<script type="text/javascript">
    const app = new Vue({
        el: '#app',
        data() {
            return {
                emptyText: '加载中',
                filterText: '',
                crmId: "",
                dataForm:[],
                defaultProps: {
                    children: 'children',
                    label: 'label'
                }
            };
        }
        ,
        mounted() {
            this.initData();
            ZOHO.embeddedApp.init();
        },
        watch: {
            filterText(val) {
                this.$refs.tree.filter(val);
            }
        },
        methods: {
            initData() {
                ZOHO.embeddedApp.on("PageLoad", function (data) {
                    app.crmId = data.EntityId;
                    app.callFunction();
                });

            },
            // 小部件调函数
            callFunction() {
                let func_name = "getTianYanChaServiceBranch";				// 函数名
                let req_data = {"id": app.crmId};// 参数
                ZOHO.CRM.FUNCTIONS.execute(func_name, req_data)
                    .then(function (data) {
                        const str = data.details.output;
                        app.dataForm = JSON.parse(str);
                        app.emptyText = '';
                    })
            },

            handleCheckChange(data, checked, indeterminate) {
                // console.log(JSON.stringify(data));
                // console.log(data, checked, indeterminate);
            },
            setCheckedKeys() {
                this.$refs.tree.setCheckedKeys([3]);
            },
            resetChecked() {
                this.$refs.tree.setCheckedKeys([]);
            },
            allChecked() {
                this.$refs.tree.setCheckedNodes(app.dataForm);
            },
            saveAccount() {
                const checkNodes = this.$refs.tree.getCheckedNodes();
                for (const element of checkNodes) {
                    console.log(JSON.stringify(element));
                    // 添加数据到CRM客户模块
                    let func_name = "insertTianYanChaData";				// 函数名
                    let req_data = {
                        "name": element.label,
                        "crmId": app.crmId
                    };// 参数
                    ZOHO.CRM.FUNCTIONS.execute(func_name, req_data)
                        .then(function (data) {
                            // alert("数据添加成功");

                            app.$alert('客户数据添加成功', '提示', {
                                confirmButtonText: '确定',
                                callback: action => {
                                    location.reload();
                                }
                            });


                        })


                }


            },
            filterNode(value, data) {
                if (!value) return true;
                return data.label.indexOf(value) !== -1;
            }

        }
    });

</script>
<style>

</style>


